<template>
	<div>
		<div class="top">
			<el-input v-model="searchVal" placeholder="用户名称/工号/手机号码" style="width: 200px;"></el-input>
			<el-select v-model="role" placeholder="身份">
				<el-option label="访客" value="visitor"></el-option>
				<el-option label="用户" value="worker"></el-option>
			</el-select>
			<el-select v-model="state" placeholder="绑定状态">
				<el-option label="正常" :value="true"></el-option>
				<el-option label="已停用" :value="false"></el-option>
			</el-select>
			<el-select v-model="mealRange" placeholder="餐段">
				<el-option v-for="(item,idx) in mealRangeList" :key="idx" :label="item.name" :value="item.id"></el-option>
			</el-select>
			<el-button type="primary" @click="getList">查询</el-button>
			<el-button type="primary" @click="download()" v-if="isStaticCode">下载静态码</el-button>
		</div>
		<div class="main">
			<el-table :data="tableData" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column v-for="(col,idx) in cols" :key="idx" :prop="col.prop" :label="col.label"></el-table-column>
			</el-table>
		</div>
		<div class="dialog-footer" style="margin-top: 20px;" v-if="!isStaticCode">
			<el-button @click="$emit('close')">取 消</el-button>
			<el-button type="primary" @click="onOk">确 定</el-button>
		</div>
	</div>
</template>
<script>
import { mealRangeMixin } from '@/mixins/'
import { URL } from '@/config'
export default {
	mixins: [mealRangeMixin],
	data() {
		return {
			multipleSelection: [],
			cols: [
				{ prop: 'name', label: '姓名' },
				{ prop: 'job_number', label: '工号' },
				{ prop: 'mobile', label: '手机号码' },
				{ prop: 'text_status', label: '状态' },
				{ prop: 'time_slot', label: '餐段' },
			],
			role: 'worker',
			tableData: [],
			searchVal: '',
			state: '',
			mealRange: '',
		}
	},
	created() {
		this.getList()
	},
	props: {
		isStaticCode: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		download() {
			window.open(URL + `/api/admin/market/static-code/download/?members=${this.multipleSelection.join(',')}`)
		},
		handleSelectionChange(val) {
			this.multipleSelection = val.map(v => v.id);
		},
		getList() {
			const { role, searchVal, state, mealRange } = this
			const data = {
				q: searchVal,
				time_slot: mealRange,
				binding: state
			}
			this.$http({
				url: `/market/edit-${role}/`,
				method: 'get',
				data
			}).then(res => {
				this.tableData = res.results
			})
		},
		onOk() {
			this.$emit('ok', {
				selectedArr: this.multipleSelection,
				role: this.role
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.top {
	padding: 20px 30px;
	display: flex;
	background: white;
	> * {
		margin-right: 20px;
	}
	margin-bottom: 20px;
}
.main {
	width: 100%;
	background: white;
	padding: 20px;
}
</style>


